import { Options, Vue } from 'vue-class-component';
import { Chart } from '@antv/g2';
import './analysis.less';
import axios from 'axios';

@Options({})
export default class Analysis extends Vue {
    /**
     * 图表数据
     *
     * @type {any[]}
     * @memberof Analysis
     */
    chartData: any[] = [];

    /**
     * 选择数据
     *
     * @type {any[]}
     * @memberof Analysis
     */
    selectData: any[] = [];

    /**
     * 当前选中
     *
     * @type {*}
     * @memberof Analysis
     */
    currentSelect: any = '';

    /**
     * 折线图实例对象
     *
     * @type {Chart}
     * @memberof Analysis
     */
    lineChart!: Chart;

    async created() {
        await this.loadSelectData();
        await this.loadChartData(this.currentSelect);
    }

    mounted() {
        this.$nextTick(() => {
            this.initLineChart();
        });
    }

    /**
     * 选中改变
     *
     * @param {string} val
     * @memberof Analysis
     */
    selectChange() {
        this.loadChartData(this.currentSelect);
    }

    /**
     * 加载图表数据
     *
     * @memberof Analysis
     */
    async loadChartData(id: string) {
        await this.$http.get('/api/1/statistical/1/getLineChart', { id: id })
            .then((res: any) => {
                if (res && res.status === 200) {
                    const data = res.data;
                    if (data.code === 1) {
                        this.chartData = data.data;
                        debugger;
                        if (this.lineChart) {
                            this.lineChart.clear(); // 清理所有图形
                            this.lineChart.changeData(this.chartData);
                            this.lineChart.line().position('horizontal*vertical');
                            this.chartData.forEach((item: any) => {
                                this.lineChart.annotation().text({
                                    position: [item.horizontal, item.vertical],
                                    content: item.vertical,
                                    style: {
                                        textAlign: 'center',
                                    },
                                    offsetY: -30,
                                });
                            });
                            this.lineChart.render();
                        }
                    }
                }
            });
    }

    /**
     * 加载下拉列表数据
     *
     * @memberof Analysis
     */
    async loadSelectData() {
        await this.$http.get('/api/1/execute/rules/1/page', {
            pageSize: 1000,
            pageNo: 1
        })
            .then((res: any) => {
                if (res && res.status === 200) {
                    const data = res.data;
                    if (data.code === 1) {
                        this.selectData = data.data.data;
                        if (this.selectData && this.selectData.length > 0) {
                            this.currentSelect = this.selectData[0].id;
                        }
                    }
                }
            });
    }

    /**
     * 初始化折线图
     *
     * @memberof Analysis
     */
    initLineChart() {
        const lineChart: any = this.$refs.lineChart;
        if (lineChart) {
            this.lineChart = new Chart({
                container: lineChart, // 指定图表容器 ID
                height: 800, // 指定图表高度
                width: lineChart.clientWidth,
                autoFit: true,
                padding: 50,
            });

            // Step 2: 载入数据源
            this.lineChart.data(this.chartData);
            // Step 3: 创建图形语法，绘制柱状图
            this.lineChart.line().position('horizontal*vertical');
            // Step 4: 渲染图表
            this.lineChart.render();
        }
    }

    /**
     * 绘制函数
     *
     * @return {*}
     * @memberof Analysis
     */
    render() {
        return (
            <div class='analysis'>
                <div class='header'>
                    <el-select filterable v-model={this.currentSelect} onChange={this.selectChange}>
                        {this.selectData.map((item: any) => {
                            return <el-option value={item.id} label={item.description}></el-option>;
                        })}
                    </el-select>
                </div>
                <a-row>
                    <a-col span={24}>
                        <div class='line-chart' ref='lineChart'></div>
                    </a-col>
                </a-row>
            </div>
        );
    }
}
